<template>
  <div class="decorate-container">
    <!-- 按钮集合 -->
    <section class="buttons">
      <div class="buttons-template h100">
        <el-tooltip content="基础设置" placement="bottom" effect="light">
          <div :class="{ 'buttons-template-active': currentActiveTemplate == 0 }" @click="templateActive(0)">
            <SvgIcon name="my-icon icon-jichu" :size="18" color="#636e72"></SvgIcon>
          </div>
        </el-tooltip>
        <el-tooltip content="初始首页" placement="bottom" effect="light">
          <div :class="{ 'buttons-template-active': currentActiveTemplate == 1 }" @click="templateActive(1)">
            <SvgIcon name="ele-HomeFilled" :size="18"></SvgIcon>
          </div>
        </el-tooltip>
        <el-tooltip content="个人主页" placement="bottom" effect="light">
          <div :class="{ 'buttons-template-active': currentActiveTemplate == 2 }" @click="templateActive(2)">
            <SvgIcon name="ele-UserFilled" :size="18"></SvgIcon>
          </div>
        </el-tooltip>
      </div>
      <h2 class="notice">注意！先保存在预览</h2>
      <div class="buttons-openration">
        <div class="cursor-pointer bdl1 preview" @click="save">
          <el-tooltip content="保存" placement="bottom" effect="light">
            <SvgIcon name="ele-Check" :size="18"></SvgIcon>
          </el-tooltip>
        </div>
        <div class="cursor-pointer bdl1 preview" @click="preview">
          <el-tooltip content="预览" placement="bottom" effect="light">
            <SvgIcon name="ele-View" :size="18"></SvgIcon>
          </el-tooltip>
        </div>
      </div>
    </section>
    <ShopBase v-show="currentActiveTemplate == 0" ref="ShopBaseRef"></ShopBase>
    <ShopHome
        v-show="currentActiveTemplate == 1"
        ref="ShopHomeRef"
        :templateId="decorationTemplateInfo.id"
        :homeTemplate="decorationTemplateInfo.homeTemplate"
    ></ShopHome>
    <ShopUser
        v-show="currentActiveTemplate == 2"
        ref="ShopUserRef"
        :templateId="decorationTemplateInfo.id"
        :userTemplate="decorationTemplateInfo.userTemplate"
    ></ShopUser>
    <!-- 装修操作 -->

    <PreviewDialog ref="PreviewDialogRef"></PreviewDialog>
  </div>
</template>

<script setup lang="ts" name="ShopDecoration">
import {ref, onMounted, reactive, defineAsyncComponent, defineComponent} from 'vue';
import {ElMessageBox} from 'element-plus';
import {useRoute} from 'vue-router';
import messageUtils from '/@/utils/messageUtils';
import {decorationApi} from '/@/api/shop/decoration';

const PreviewDialog = defineAsyncComponent(() => import("./PreviewDialog.vue"))
const PreviewDialogRef = ref()
import ShopBase from './components/ShopBase.vue';

import ShopHome from './components/ShopHome.vue';

import ShopUser from './components/ShopUser.vue';

let ShopBaseRef = ref();

let ShopHomeRef = ref();

let ShopUserRef = ref();

let route = useRoute();
let currentActiveTemplate = ref(0);
let decorationTemplateInfo = reactive({
  id: '',
  baseTemplate: {},
  homeTemplate: [],
  userTemplate: [],
  navigation: {},
  setUp: {},
});

let templateActive = (target: number) => {
  if (currentActiveTemplate.value != target) {
    ElMessageBox.confirm('是否保存当前配置的数据', '', {
      confirmButtonText: '保存',
      cancelButtonText: '放弃',
      type: 'warning',
    })
        .then(() => {
          console.log('确认。。');
          save();
          currentActiveTemplate.value = target;
        })
        .catch(() => {
          console.log('取消');
          currentActiveTemplate.value = target;
        });
  }

  console.log('currentActiveTemplate: ', currentActiveTemplate.value);
};

let save = () => {
  console.log('currentActiveTemplate.value: ', currentActiveTemplate.value);

  if (currentActiveTemplate.value == 0) {
    // 基础设置
    ShopBaseRef.value.saveInfo();
  } else if (currentActiveTemplate.value == 1) {
    // 主页设置
    ShopHomeRef.value.saveInfo();
  } else {
    // 用户中心设置
    ShopUserRef.value.saveInfo();
  }
};

onMounted(async () => {
  let id: string = route.query.id;
  if (id) {
    console.log('id 存在.... ');
    decorationTemplateInfo.id = id;
    loadTemplateInfo(id);
  } else {
    messageUtils().error('请从模版页面点击装修进入，否则创建无效!');
  }
});

const loadTemplateInfo = async (id: string) => {
  try {
    let {data} = await decorationApi().viewTemplate(id);
    ShopBaseRef.value.init(id, data.baseComponents, data.navigation, data.setUp);
    ShopHomeRef.value.init(id, data.homeComponents);
    ShopUserRef.value.init(id, data.userComponents);
  } catch (e) {
    console.error(e);
    messageUtils().error('获取模版信息失败，请刷新重试!');
  }
};

const preview = () => {
  const id = route.query.id;
  PreviewDialogRef.value.openDialog(id);
}


</script>

<style lang="scss" scoped>
.decorate-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.buttons {
  background-color: #fff;
  height: 50px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  /* 下拉 */
  .frop {
    padding-right: 15px;

    .el-button.el-button--primary.el-dropdown-selfdefine {
      background: #fff;
      color: #000;
      border: 1px solid #dcdee0;
    }
  }

  .el-button {
    font-size: 14px;
    padding: 0 16px;
    height: 30px;

    &.el-button--primary {
      background: #155bd4;
    }

    &.el-button--danger {
      background: red;
    }
  }

  .buttons-template {
    display: flex;
    width: 150px;

    div {
      width: 50px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid var(--next-border-color-light);
      cursor: pointer;

      i {
        display: block;
      }
    }

    &-active {
      background-color: #74b9ff;
    }
  }

  .buttons-openration {
    display: flex;
    height: 100%;
  }

  .notice {
    color: #e74c3c;
  }

  .preview {
    display: flex;
    width: 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}
</style>
